<template>
  <div>
    <el-card>
      <!-- 基本信息 -->
      <div class="anchorMsg" v-loading="loading">
        <p>基本信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>头像展示</span>
              <el-image
                style="
                  width: 100px;
                  height: 100px;
                  border: 1px solid darkgray;
                  margin-left: 5px;
                  vertical-align: top;
                "
                :src="url"
              >
              </el-image>
            </li>
            <li>
              <span>绑定手机</span>
              <el-input v-model="phone" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>用户ID</span>
              <el-input v-model="userID" disabled> </el-input>
            </li>
            <li>
              <span>用户昵称</span>
              <el-input v-model="userName" disabled> </el-input>
            </li>
            <li>
              <span>最后登陆时间</span>
              <el-input v-model="onlineTime" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>性别</span>
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
            </li>
            <li>
              <span>版本</span>
              <el-input v-model="version" disabled> </el-input>
            </li>
            <!-- <li>
              <span>最后下线时间</span>
              <el-input v-model="outTime" disabled> </el-input>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 主播标签 -->
      <div class="anchorTitle">
        <p>主播标签</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>主播标签</span>
              <el-input v-model="title" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>心动值</span>
              <el-input v-model="Cardiac" disabled> </el-input>
            </li>
          </ul>
        </div>
      </div>
      <!-- 实名信息 -->
      <div class="realMsg">
        <p>实名信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>是否实名</span
              ><el-input v-model="isReal" disabled></el-input>
            </li>
            <li>
              <span>证件号码</span><el-input v-model="num" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>出生年月日</span
              ><el-input v-model="birth" disabled></el-input>
            </li>
            <li>
              <span>真实姓名</span><el-input v-model="name" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>实名认证年龄</span
              ><el-input v-model="age" disabled></el-input>
            </li>
            <li>
              <span>认证日期</span
              ><el-input v-model="realDate" disabled></el-input>
            </li>
          </ul>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="contact">
        <p>联系方式</p>
        <div class="comStyle">
          <ul>
            <li><span>QQ</span><el-input disabled v-model="qq"></el-input></li>
          </ul>
          <ul>
            <li>
              <span>微信</span><el-input disabled v-model="weChat"></el-input>
            </li>
          </ul>
          <ul>
            <li><el-button @click="unbundling('1')">解绑QQ</el-button></li>
            <li><el-button @click="unbundling('0')">解绑微信</el-button></li>
          </ul>
          <!-- <ul>
            <li><el-button>解绑微信</el-button></li>
          </ul> -->
        </div>
      </div>
      <!-- 业务信息总览 -->
      <div class="business">
        <p>业务信息总览</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>在线总时长</span
              ><el-input v-model="totalTime" disabled></el-input>
            </li>
            <li>
              <span>发起通话次数</span
              ><el-input v-model="callNum" disabled></el-input>
            </li>
            <li>
              <span>通话总收益</span
              ><el-input v-model="callProfit" disabled></el-input>
            </li>
            <li>
              <span>总支出</span
              ><el-input v-model="TotalExpenditure" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>匹配总时长</span
              ><el-input v-model="matchingTime" disabled></el-input>
            </li>
            <li>
              <span>主动接起次数</span
              ><el-input v-model="pickupNum" disabled></el-input>
            </li>
            <li>
              <span>礼物总收益</span
              ><el-input v-model="giftIncome" disabled></el-input>
            </li>
            <li>
              <span>实际总收益</span
              ><el-input v-model="totalIncome" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>通话收益</span
              ><el-input v-model="callRevenue" disabled></el-input>
            </li>
            <li>
              <span>获得礼物数</span
              ><el-input v-model="giftNum" disabled></el-input>
            </li>
            <li>
              <span>其他收益</span
              ><el-input v-model="other" disabled></el-input>
            </li>
            <!-- <li>
              <span>评价平均分</span
              ><el-input v-model="average" disabled></el-input
              ><el-button disabled>低分</el-button>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 账号状态 -->
      <div class="accountState">
        <p>账号状态</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>状态</span><el-input v-model="state" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>违规原因</span
              ><el-input v-model="reason" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>解封时间</span
              ><el-input v-model="unsealTime" disabled></el-input>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { userUserDetail, userThirdAccountUnbinding } from "@/api/union";
export default {
  name: "dataDetails",
  props: {
    anchorID: "",
  },
  created() {
    this.getData();
  },
  data() {
    return {
      loading: false,
      url: "", //头像展示
      phone: "", //绑定手机
      userID: "", //用户id
      userName: "", //用户昵称
      onlineTime: "", //最后上线时间
      radio: "", //性别
      version: "", //版本
      title: "", //标签
      Cardiac: "", //心动值
      isReal: "", //是否实名
      num: "", //证件号码
      birth: "", //出生年月
      name: "", //真实姓名
      age: "", //年龄
      realDate: "", //认证日期
      qq: "", //qq
      weChat: "", //微信
      totalTime: "", //在线总时长
      callNum: "", //通话次数
      callProfit: "", //通话中收益
      TotalExpenditure: "", //总支出
      matchingTime: "", //匹配总时长
      pickupNum: "", //主动接起次数
      giftIncome: "", //礼物总收益
      totalIncome: "", //实际总收益
      other: "", //其他收益
      giftNum: "", //获得礼物数
      callRevenue: "", //通话收益时长
      state: "", //账号状态
      reason: "", //违规原因
      unsealTime: "", //解封时间
    };
  },
  methods: {
    async getData() {
      if (this.anchorID == "") {
        return;
      }
      let { code, data } = await userUserDetail({
        userId: this.anchorID,
      });
      if (code == 0) {
        console.log(data, "9966");
        this.url = data.avatar;
        this.isReal = data.isAuth;
        this.title = data.identity;
        this.name = data.realName;
        this.age = data.age;
        this.num = data.IDCard;
        this.radio = data.sex;
        this.phone = data.mobile;
        this.unsealTime = data.enableTime;
        this.reason = data.banReason;
        this.state =
          data.status == "0" ? "正常" : data.state == "1" ? "封禁" : "删除";
        this.Cardiac = data.credit;
        this.birth = data.birthday;
        this.realDate = data.authTime;
        this.weChat = data.wechat;
        this.qq = data.qq;
        this.version = data.version;
        this.userName = data.nickName;
        this.userID = data.userId;
        this.onlineTime = data.lastLoginTime;
        this.totalTime = data.online_duration;
        this.matchingTime = data.matching_duration;
        this.other = data.other_total_income;
        this.giftIncome = data.gift_total_income;
        this.callNum = data.start_call_num;
        this.callProfit = data.call_total_income;
        this.TotalExpenditure = data.total_pay;
        this.totalIncome = data.actual_income;
        this.giftNum = data.gift_num;
        this.pickupNum = data.active_up_num;
        this.callRevenue = data.valid_call_time;
      }
    },
    //解绑第三方
    unbundling(type) {
      let msg = type == "1" ? "QQ" : "微信";
      this.$confirm(`是否解绑该用户${msg}信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await userThirdAccountUnbinding({
            type,
            user_id: this.userID,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "解绑成功!",
            });
            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  p {
    font-size: 16px;
    font-weight: bold;
  }
  .comStyle {
    width: 100%;
    display: flex;
    justify-content: space-around;
    ul {
      display: flex;
      flex-direction: column;
      width: 30%;
      li {
        list-style: none;
        margin-bottom: 10px;
        span {
          width: 100px;
          display: inline-block;
        }
      }
    }
  }
}
/deep/.el-input {
  width: 260px;
}
</style>